<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="detail">
      <div class="topItem">
        <div class="logo">
          <img src="../../assets/images/img-1.png" alt="">
        </div>
      </div>
      <div class="centerItem">
        <div class="videoBox"></div>
        <DetailBox :size="size1" :detailBox="detailBox" :detail="detail" :introduction="introduction"></DetailBox>
      </div>
      <div class="bottItem">
        <ItemList class="totalItem" :itemList="itemList" :size="size1"></ItemList>
        <div v-if="size=='height'" class="remTitle">相关推荐</div>
        <Recommend class="recom" :recommendList="recommendList" :size="size"></Recommend>
      </div>
    </div>
  </div>
</template>

<script>
import TopBtn from '@/components/Widgets/topBtn'
import DetailBox from '@/components/Widgets/detailBox'
import ItemList from '@/components/Widgets/itemList'
import Recommend from '@/components/Widgets/recommend'
import { getSubStr } from '@/commont/utils/stringUtil.js'
export default {
  components: {TopBtn,DetailBox,ItemList,Recommend},
  props: {},
  data () {
    return {
      // 顶部按钮
      topBtnList: [
        {icon:'el-icon-search', btnName:'专区内搜索'},
        {icon:'el-icon-document', btnName:'专区内检索'},
        {icon:'el-icon-star-off', btnName:'收藏'},
        {icon:'el-icon-time', btnName:'观看记录'},
        {icon:'el-icon-back', btnName:'返回'},
      ],
      className: { btnColor:'#cdcdcd',dateTimeColor:'#FFFFFF'},
      // 简介
      size1: 'width',
      detailBox: 'detailBox',
      detail: {
        title:'舍我其谁',
        score:'8.1',
        corporate:'天翼视讯传媒有限公司提供',
        year:'2021',
        are:'中国大陆',
        total:'41',
        director:'鞠觉亮',
        actor:'李兰迪，牛骏峰，韩玖诺',
        introduction:'（内容来源于华数）天才青年围棋手胜景初，黑马姿态一战成名，轰动围棋界。从不接受任何采访的他成为了众多媒体争相报道的对象。实习记者程了帮盛景初解围，却被误会为他的女朋友，两人假戏真做等候收到i的就哦啊收到都好都好是等哈收到都好都好的话大撒大撒大大飒飒大苏打大苏打大大是发售公告发布'
      },
      // 剧集
      itemList:[
        {title:'第一季热热我热温热热热呜呜认为人为认为人认为人为人热舞'},
        {title:'第一季'},
        {title:'第一季'},
        {title:'第一季'},
        {title:'第一季'},
        {title:'第一季'},
      ],
      // 推荐位
      size: 'width',
      recommendList: [
        {img:require('@/assets/img/r-1.jpg'), title:'漫长的告白'},
        {img:require('@/assets/img/r-2.jpg'), title:'人生大事'},
        {img:require('@/assets/img/r-3.jpg'), title:'外太空的莫扎特大苏打大'},
        {img:require('@/assets/img/r-4.jpg'), title:'七人乐队'},
        {img:require('@/assets/img/r-5.jpg'), title:'无负今日'},
        {img:require('@/assets/img/r-6.jpg'), title:'断·桥'},
      ]
    }
  },
  computed: {
    // 纵向：210；横向150
    introduction(){
      return getSubStr(this.detail.introduction,150,true)
    }
  },
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {},
  filters: {},
}
</script>

<style lang="less" scoped>
.detail{
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg.png');
  padding: 20px;
  position: relative;
  .topItem{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 40px;
    .logo{
      margin-left: 40px;
    }
  }
  .centerItem{
    padding: 5px 50px 15px 40px;
    display: flex;
    // 纵向：width:330,height:445；横向：width:547,height:345
    .videoBox{
      width: 547px;
      height: 345px;
      border-radius: 20px;
      background-color: #000000;
    }
    // 纵向：width:765；横向：width:563
    .detailBox{
      width: 563px;
      height: 310px;
      margin-left: 40px;
      color: #FFFFFF;
    }
  }
  .bottItem{
    padding: 10px 50px 10px 40px;
    color: #FFFFFF;
    position: relative;
    .remTitle{
      font-size: 23px;
    }
    .totalItem{
      //纵向
      // position: absolute;
      // 横向
      position: relative;
      top: -20px;
    }
    .recom{
      //纵向
      // position: absolute;
      // top: 50px;
      // 横向
      position: relative;
      top: -15px;
    }
  }
}
</style>